<template>
  <div>
    <el-card>
      <template #header>
        <el-row type="flex" justify="end">
          <el-button
            type="primary"
            size="small"
            @click="add"
          >添加员工</el-button>
        </el-row>
      </template>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="email" label="邮箱" />

        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="set(row.id)"
            >设置角色</el-button>
            <el-button size="small" @click="edit(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="center">
        <el-pagination
          :page-size="limit"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <addUsers ref="addUser" :dialog-visible.sync="showDialog" @updateEvent="getEmployees" />
    <roleList ref="editRole" :show-dialog.sync="showDialogs" />
  </div>
</template>

<script>
import { getEmployee, delEmployee } from '@/api/employee/index'
import addUsers from './component/index.vue'
import roleList from './component/roleTool.vue'
export default {
  components: { addUsers, roleList },
  data() {
    return {
      total: 0,
      showDialog: false,
      showDialogs: false,
      limit: 5,
      start: 0,
      tableData: []
    }
  },
  created() {
    this.getEmployees()
  },
  methods: {
    // 员工列表
    async getEmployees() {
      const rew = await getEmployee()
      const res = await getEmployee({
        _limit: this.limit,
        _start: this.start
      })
      console.log(89, rew)
      this.total = rew.data.length
      this.tableData = res.data
    },

    add() {
      this.showDialog = true
    },
    edit(id) {
      this.showDialog = true
      this.$refs.addUser.getEmployeeById(id)
      // console.log(id)
    },
    // 删除角色
    del(id) {
      this.$confirm('是否确定删除？', '提示', {
        type: 'warning'
      }).then(async() => {
        // 调用接口
        await delEmployee(id)
        /**
         * 判断到删除的是最后一条数据，我们更新列表的时候
         * 应该请求上一页的数据才对，注意：需要判断当前页面是否为第一页
         * 如果是第一页则不需要请求上一页的数据。
         * 如何判断此刻是在删除最后一条数据？
         * 答：getEmployees.length === 1说明是最后一条数据了
         * */
        if (this.tableData.length === 1 && this.start !== 1) {
          this.start -= this.limit
        }
        // 更新列表
        this.getEmployees()
        this.getTotals()
      }).catch((err) => {
        // 点击了取消按钮会触发这里，或者then里面的代码报错也会触发这里
        // 并且错误信息会被参数err接收到
        console.log('点击了取消按钮：', err)
      })
    },
    set(id) {
      this.showDialogs = true
      this.$refs.editRole.getRoleIds(id)
    },
    currentChange(newPage) {
      this.start = (newPage - 1) * this.limit
      this.getEmployees()
    }
  }
}
</script>

<style>
</style>
